<template>
<div class="col-md-12">
  <ipcam-detail></ipcam-detail>
  <my-navbar>
    <template slot="left">
      <div class="checkbox">
        <label>
          <input type="checkbox" v-model="inDelete"> {{$t('common.delete')}}
        </label>
      </div>         
    </template>   
    <template slot="right"> 
      <button class="btn btn-default" @click.prevent="onAdd">
        <span class="glyphicon glyphicon-plus"></span> {{$t('common.add')}}
      </button>
      <button class="btn btn-default" @click.prevent="onBatchAdd">
        <span class="glyphicon glyphicon-plus"></span> {{$t('common.batchAdd')}}
      </button>
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>    
    </template>
  </my-navbar>
  <div class="col-md-12">
    <my-table :cfg="cfg" :list="ipcam.list" :loading="ipcam.loading"></my-table>
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import locales from '../locales/srcIpcam.js'
import IpcamDetail from './IpcamDetail.vue'
import {List} from '../configs/srcIpcam.js'
import {streamSrcApi} from 'share/server/api.js'
import * as actions from 'share/server/vuex/actions/streamsrc.js'

export default {
  locales,
  components: {
    'ipcam-detail': IpcamDetail,
  },
  vuex: {
    getters: {
      ipcam: (state) => state.ipcam.ipcam
    },
    actions
  },
  data () {
    return {
      inDelete: false, 
      cfg: {
        checkable: false,
        showHead: true,
        columns: new List(this),
        operation: {
          name: this.$t("common.operation"),
          width: 'auto',
          actions: [{
            icon: 'glyphicon glyphicon-trash',
            doClick: this.onDel,
            isShow: this.showDel
          }, {
            icon: 'glyphicon glyphicon-edit',
            doClick: this.onShowDetail,
            isShow: this.showEdit
          }]
        }        
      }
    }
  },
  methods: {
    showDel (item) {
      return this.inDelete
    },
    showEdit (item) {
      return !this.inDelete
    },
    onBatchAdd () {
      this.onShowDetail({
        _id: -1,
        port: 554,
        subStatus: 1,
        manufacture: 'Hikvision',
        productModel: '*',
        username: 'admin',
        password: '12345',
        channel: 1,
        ipaddr: '192.168.1.100',
        name: 'example',
        tag: '',
        useCustomUrl: 0,
        mainUrl: '',
        previewUrl: '',
        ptzStatus: 'disable',
        onvifPort: 80,
        soapVersion: 1,
        proxyEnable: 1,
      }, true)
    },
    onAdd () {
      this.onShowDetail({
        _id: -1,
        port: 554,
        subStatus: 1,
        manufacture: 'Hikvision',
        productModel: '*',
        username: 'admin',
        password: '12345',
        channel: 1,
        ipaddr: '192.168.1.100',
        name: 'example',
        tag: '',
        useCustomUrl: 0,
        mainUrl: '',
        previewUrl: '',
        ptzStatus: 'disable',
        onvifPort: 80,
        soapVersion: 1,  
        proxyEnable: 1,     
      }, false)
    },
    onShowDetail (item, batch) {
      ebus.emit('show-ipcam-detail', item, batch)
    },
    onRefresh () {
      this.doLoadIpcams()
    },
    onDel (item) {
      streamSrcApi.delItem('ipcameras', item._id).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          ebus.emit('load-ipc-dep-srcs')
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
    },
    loadIpcDepSrcs () {
      this.doLoadIpcams()
      this.doLoadIpcSrcs()
      this.doLoadProxySrcs()
    }
  },
  ready () {
    ebus.on('load-ipc-dep-srcs', this.loadIpcDepSrcs)
  }
}
</script>

<style>
</style>